<template>
  <el-table
    ref="singleTable"
    :data="myarr"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column label="编号" type="index" width="100"> </el-table-column>
    <el-table-column label="上报单位" width="180">
      <template slot-scope="scope">{{ unitObj[scope.row.unit] }}</template>
    </el-table-column>
    <el-table-column prop="date" label="值班日期" width="150">
    </el-table-column>
    <el-table-column prop="dates" label="上报时间" width="180">
    </el-table-column>
    <el-table-column prop="address" label="道路" width="150"> </el-table-column>
    <el-table-column prop="road" label="路况" width="150"
      ><template slot-scope="scope">
        <span style="color: #ff9e37">
          {{ roadObj[scope.row.road] }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          style="border: none"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
          ><i style="color: blue; padding-right: 5px" class="el-icon-view"></i
          >查看</el-button
        >
        <el-button
          style="border: none; border-radius: 8px"
          size="mini"
          @click="handleDelete(scope.row.id)"
          ><i style="color: red; padding-right: 5px" class="el-icon-delete"></i
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { deleteByIdApi } from "../../../api/backstageApi";
export default {
  props: ["myarr"],
  data() {
    return {
      unitObj: {
        1: "交警一大队",
        2: "交警二大队",
        3: "交警三大队",
        4: "交警四大队",
      },
      roadObj: {
        1: "正常",
        2: "拥堵",
      },
      /*   tableData: [
        {
          unit: 1, // 1交警一大队 2交警二大队 3交警三大队 4 交警四大队
          date: "2016-05-02",
          dates: "2016-05-02 12:00",
          address: "道路",
          road: 1, // 1正常 2拥堵
        }
      ], */
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(id) {
      //删除逻辑
      deleteByIdApi({ id: id }).then(res=> {
        console.log(res);
        if(res.code==200){
          this.$emit('delTable')//刷新
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  border-radius: 8px;
  text-align: center;
}
/deep/.cell {
  text-align: center;
}
</style>
